<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加节点</title>
    <script>
        function f1() {
            // 1.创建一个div标签
            let d = document.createElement("div");
            // 2.创建标签体内容
            let text = document.createTextNode("这是一个div");
            // 3.将指定节点text添加到指定节点d的标签体的末尾
            d.appendChild(text)
            // 4.将指定节点div添加到超链接标签体的末尾
            let a = document.getElementById("a");
            // a.appendChild(d);

            // 将div添加到超链接之前
            let b = document.getElementById("b");
            // b.insertBefore(d, a);

            // 替换超链接
            b.replaceChild(d, a);
        }
    </script>
</head>
<body id="b">
<a href="javascript:;" onclick="f1()" id="a">
    超链接
</a>
</body>
</html>